<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理数组响应式化的问题</title>
</head>
<body>
    <script>

        
        let array_method = [
            'push',
            'pop',
            'push',
            'unshift',
            'shift',
            'sort',
            'reverse'
         ];

         // 以 Array 的原型 创建一个
         const Arraynewmethods = Object.create(Array.prototype)
         array_method.forEach(method => {
            Arraynewmethods[method] = function() {
                console.log(`调用${method}拦截的方法`);
                for (let i = 0; i < arguments.length; i++) {
                    const arg = arguments[i];
                    reactify(arg);
                    
                }
                let res = Array.prototype[method].apply(this, arguments);
                return res;
            };
         });

         // 定义一个响应式的属性
         function defineReactive(target, key , value, enumerable) {
            if (typeof value === 'object' && typeof value !== null && !Array.isArray(value)) {
                reactify(value);
            } else {
                Object.defineProperty(target, key, {
                    get () {
                        console.log(`获取对象的属性 ${key} 的属性值为: ${value}`);
                        return value
                    },
                    set (newVal) {
                        console.log(`设置对象的属性 ${key} 的属性值为: ${newVal}`);
                        value = newVal;
                    },
                    enumerable,
                    configurable: true
                })
            }
        }
        // 响应式化
        function reactify(o) {
            const keys = Object.keys(o);

            for (let i = 0; i < keys.length; i++) {
                const value = o[keys[i]];
                if (Array.isArray(value)) {
                    value.__proto__ = Arraynewmethods;
                    for (let j = 0; j < value.length; j++) {
                        const arrValue = value[j];
                        reactify(arrValue)
                    }
                } else {
                    defineReactive(o, keys[i], value, true);
                }
            }
        }

        let obj = {
            name: 'str',
            arr: [
                {
                    number: 1
                }
            ]
        }
        reactify(obj)
    </script>
</body>
</html>